<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				-webkit-touch-callout:none;
				-webkit-user-select:none;
				-webkit-tap-highlight-color:transparent;
			}
			body{background-color: white}
			ul{list-style-type: none}
			a {text-decoration: none;color: #18B4FE;}
			a.gray {color: darkgray;}
			
			.header{
				z-index: 9990;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				border-bottom: 1px solid #eee;
				background-color: white;
			}
			
			.content{
				padding-top: 45px;
			}
			.content .nav-tip{
				font-size: 14px;
				padding: 12px;
				border-bottom: 1px solid #eee;
				color: red;
			}
			.content a{
				display: block;
				padding: 15px 12px;
				border-bottom: 1px solid #eee;
			}
			.nav-tip .tip,
			.content a .tip{
				float: right;
				margin-top: 2px;
				font-size: 12px;
				color: gray;
			}
		</style>
	</head>

	<body>
		<p class="header">MeScroll Demos 所有案例</p>
		
		<div class="content">
			
			<p class="nav-tip">base demos 基础案例</p>
			<a href="base/list-news.html">list-news 新闻列表 <span class="tip">下拉刷新添加数据到列表顶部</span></a>
			<a href="base/list-products.html">list-products 商品列表 <span class="tip">下拉刷新重置列表数据</span></a>
			<a href="base/mescroll-options.html">mescroll-options 所有配置项 <span class="tip">快速熟悉mescroll</span></a>
			<a href="base/list-mescroll-one.html">list-mescroll-one 单mescroll <span class="tip">切换菜单刷新列表数据</span></a>
			<a href="base/list-mescroll-more.html">list-mescroll-more 多mescroll <span class="tip">列表数据的缓存</span></a>
			<a href="base/list-full-lock.html">list-full-lock <span class="tip">满屏加载与锁定滑动</span></a>
			<a href="base/list-mescroll-lazy.html">list-mescroll-lazy <span class="tip">图片懒加载</span></a>
			<a href="base/list-mescroll-body.html">list-mescroll-body <span class="tip">body为滚动区域</span></a>
			<a href="base/list-msg.html">list-msg <span class="tip">聊天记录</span></a>
			<a href="base/list-products-vue.html">list-products-vue <span class="tip">vue的示例</span></a>
			
			<p class="nav-tip">intermediate demos 中级案例</p>
			<a href="sticky/mescroll-sticky.html">mescroll-sticky <span class="tip">吸顶悬浮</span></a>
			<a href="search/mescroll-search.html">mescroll-search <span class="tip">商品搜索</span></a>
			<a href="swiper/mescroll-swiper-tap.html">mescroll-swiper-tap <span class="tip">轮播菜单</span></a>
			<a href="swiper/mescroll-swiper-nav.html">mescroll-swiper-nav <span class="tip">轮播导航</span></a>
			<a href="swiper/mescroll-swiper-sticky.html">mescroll-swiper-sticky <span class="tip">轮播+吸顶悬浮</span></a>
			<a href="dotJump/dotJump.html">dotJump <span class="tip">弹跳小球</span></a>
			<a href="beibei/beibei.html">【贝贝 v6.0.0】APP的下拉刷新上拉加载</a>
			<a href="yabuli/yabuli.html">【雅布力 v2.4.0】APP的下拉刷新上拉加载</a>
			<a href="xinlang/xinlang.html">【新浪微博 v7.6.1】APP的下拉刷新上拉加载</a>
			<a href="zhihu/zhihu.html">【知乎 v3.53.0】APP的下拉刷新上拉加载</a>
			
			<p class="nav-tip">senior demos 高级案例 <span class="tip">请到mescroll官网获取</span></p>
			<a class="gray">【淘宝 v6.8.0】APP的下拉刷新上拉加载</a>
			<a class="gray">【京东 v6.1.0】APP的下拉刷新上拉加载</a>
			<a class="gray">【美团 v8.2.3】APP的下拉刷新上拉加载</a>
			<a class="gray">【美囤妈妈 v2.0.5】APP的下拉刷新上拉加载</a>
		</div>
		
	</body>
</html>